<template>
  <el-row style="padding: 80px 20px 0 20px;background-color:#f8fafd">
    <!-- 顶部搜索框 -->
    <div class="searchbox">
      <span class="left">型号搜索：</span>
      <el-input placeholder="请输入" v-model="searchinfo.name" clearable></el-input>
      <el-button icon="el-icon-search" @click="searchbtn">查询</el-button>
    </div>
    <!--中部新建按钮  -->
    <div class="down">
      <div class="mid">
        <el-button  class="create" icon="el-icon-circle-plus-outline" @click="createDia.visible=true">新建</el-button>
      </div>
      <el-table  :data="sblist.currentPageRecords" stripe style="width: 100%">
        <el-table-column  type="index" label="序号" min-width="80"/>
        <el-table-column prop="name" label="型号名称" min-width="140"/>
        <el-table-column prop="model" label="型号编码" min-width="145"/>
        <el-table-column prop="image" label="型号图片" min-width="140">
          <template v-slot="{row}">
              <img style="wdith:24px;height:24px" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="vmRow" label="货道行" min-width="145"/>
        <el-table-column prop="vmCol" label="货道列" min-width="145" />
        <el-table-column prop="channelMaxCapacity" label="设备容量" min-width="140"/>
        <el-table-column  label="操作" width="100">
          <template v-slot="{ row }">
            <a href="javascript:;" @click="editsb(row)">修改</a>
            <a href="javascript:;" style="color:red;margin-left:10px" @click="delsb(row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageinfo" >
          <span>共条{{this.sblist.totalCount}}记录  第{{this.sblist.pageIndex}}/{{this.sblist.totalPage}}页</span>
          <div class="button">
            <el-button class="pagebutton" :disabled="sblist.pageIndex==='1'||''?true:false" @click="pageup">上一页</el-button>
            <el-button class="pagebutton" :disabled="sblist.pageIndex===sblist.totalPage" @click="pagedown">下一页</el-button>
          </div>
      </div>
      <!-- 新建的dialog -->
      <el-dialog  :title="createDia.type"  :visible="createDia.visible"  width="50%" @close="createDia.visible=false" center>
            <el-form ref="addSb" style="pading:20px 20px;display:flex;justify-content:center;width:100%" :model="createinfo" >
              <el-form-item prop="name" label="型号名称" :rules="[{required:true,message:'请输入型号名称',trigger:'blur'}]" >
                <el-input  style="width:400px" type="text"  placeholder="请输入"  v-model="createinfo.name"  maxlength="15"  show-word-limit/>
              </el-form-item>
              <el-form-item prop="model" label="型号编码" :rules="[{required:true,message:'请输入(限制字数,字母,中划线,下划线)',trigger:'blur'}]" >
                <el-input  style="width:400px" type="text"  placeholder="请输入"  v-model="createinfo.model"  maxlength="10"  show-word-limit/>
              </el-form-item>
              <el-form-item  prop="vmRow" label="货道行数" :rules="[{required:true,message:'请输入',trigger:'blur'}]" >
                 <el-input-number   placeholder="请输入"  style="width:400px" v-model="createinfo.vmRow" controls-position="right" @change="handleChange" />
              </el-form-item>
              <el-form-item  prop="vmCol" label="货道列数" :rules="[{required:true,message:'请输入',trigger:'blur'}]" >
                 <el-input-number   placeholder="请输入"  style="width:400px" v-model="createinfo.vmCol" controls-position="right" @change="handleChange" />
              </el-form-item>
              <el-form-item  prop="channelMaxCapacity" label="货道容量" :rules="[{required:true,message:'请输入',trigger:'blur'}]" >
                 <el-input-number   placeholder="请输入"  style="width:400px" v-model="createinfo.channelMaxCapacity" controls-position="right" @change="handleChange" />
              </el-form-item>
              <el-form-item class="img" prop="image" label="设备图片" :rules="[{required:true,message:'请输入商品类型',trigger:'blur'}]" >
                  <el-upload v-if="createDia.isShow"  action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"  name="fileName"  list-type="picture-card" :limit="1"  :on-change="handleChange">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <img style="width:76px;height:76px" @click="editimage" v-else :src="createDia.editimg" alt="">
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="createDia.visible = false">取 消</el-button>
              <el-button class="pagebutton" type="primary" @click="createSubmit">确 定</el-button>
            </span>
      </el-dialog>

    </div>
  </el-row>
</template>

<script>

//
import { getsblist, addSb, delSb } from '@/api/sblx'
export default {
  created () {
    this.searchbtn()
  },
  data () {
    return {
      searchinfo: {
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      sblist: {},
      createDia: {
        visible: false,
        type: '新增设备类型',
        isShow: true,
        editimg: ''
      },
      createinfo: {
        vmRow: 0,
        vmCol: 0,
        name: '',
        channelMaxCapacity: 0,
        model: '',
        image: ''

      }
    }
  },

  methods: {
    async searchbtn () {
      const { data } = await getsblist(this.searchinfo)
      console.log(data)
      this.sblist = data
    },
    async pageup () {
      if (this.sblist.pageIndex !== '1') {
        this.sblist.pageIndex--
        const { data } = await getsblist({
          pageIndex: this.sblist.pageIndex,
          paseSize: 10,
          name: this.searchinfo.name
        })
        console.log(data)
        this.sblist = data
      }
    },
    async pagedown () {
      if (this.sblist.pageIndex !== this.sblist.totalPage) {
        this.sblist.pageIndex++
        const { data } = await getsblist({
          pageIndex: this.sblist.pageIndex,
          paseSize: 10,
          name: this.searchinfo.name
        })
        console.log(data)
        this.sblist = data
      }
    },
    handleChange (a) {
      console.log(a)
      this.createinfo.image = a.response
    },
    async createSubmit () {
      try {
        const { data } = await addSb(this.createinfo)
        if (data) { this.$message.success('新增成功') }

        this.searchbtn()
      } catch (e) {
        this.$message(e.response.data)
        console.log(e)
      } finally {
        this.createDia.visible = false
      }
    },
    editsb (row) {
      console.log(row)
      this.createDia.type = '修改设备类型'
      this.createinfo.vmRow = row.vmRow
      this.createinfo.vmCol = row.vmCol
      this.createinfo.name = row.name
      this.createinfo.channelMaxCapacity = row.channelMaxCapacity
      this.createinfo.model = row.model
      this.createDia.editimg = row.image
      this.createDia.isShow = false
      this.createDia.visible = true
    },
    editimage () {
      this.createDia.isShow = true
    },
    async delsb (row) {
      console.log(row)
      try {
        const res = await delSb(row.typeId)
        console.log(res)
        this.$message.success('删除成功')
        this.searchbtn()
      } catch (e) {
        console.log(e)
        this.$message(e.response.data)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  .searchbox {
    // background-color: skyblue;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 64px;
    width: 100%;
    span{
      font-size: 14px;
      width:110px;
      line-height: 36px;
      height:36px;
    }
    .el-input {
      width: 210px;
      line-height: 36px;
      // height: 36px !important;
    }
    .el-button{
      background-color: #5f84ff;
      color: #fff;
      border: none;
      margin-left: 10px;
      width:80px;
      height:36px;
      padding: 0 0;
    }
  }
  .down{
    .mid{//新建按钮
    margin-bottom: 20px;
      .el-button.create{
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        color:#fff ;
        border:none;
      }
      .el-button.create:hover{
        background: linear-gradient(135deg,#ff7d43,#db3602)!important;
      }
      .el-button.input{
        background: #fbf4f0!important;
        color:#655b56 ;
        border:none;
      }
      .el-button.input:hover{
        background:#f3e7e1!important;
      }
    }
    .pageinfo{//页脚的 页数信息
      display:flex;
      justify-content:space-between;
      width:100%;
      height:96px;
      padding:32px 16px;
      line-height:32px;
      .button{
        display: flex;
        .pagebutton{
          width:70px;
          height:32px;
          padding:0 0
        }
      }
    }
  }
}
.el-dialog__wrapper{
  /deep/.el-dialog__header{
    text-align: left !important;
  }
  .el-dialog__body{
    .el-form{
      display:flex;
      flex-direction: column;
      // justify-content: space-between;

    /deep/.el-form-item{
      width:100%;
      display: flex;
      justify-content: center;

      .el-form-item__label{
        // text-align: center;
        width: 140px !important;
        // background-color: #db3602;
      }
      // display:flex;
      // flex-direction: column;
    }
    /deep/.el-form-item.img{
      display: flex;
      justify-content: flex-start;
      margin-left: 56px;
      .el-upload.el-upload--picture-card{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 76px;
        height: 76px;
        >.el-upload-list__item{
          width: 76px!important;
          height: 76px!important;
        }

      }
    }
    }

  }
}
</style>
